import React from 'react';
import { connect } from 'dva';
import createG2 from 'g2-react';
import { baseUrl } from '../../config/system';
import { Button, Table, Form, Input,Row,Col,TreeSelect, Popconfirm, Select, DatePicker ,Tabs} from 'antd';
const { RangePicker } = DatePicker;
import ServiceLifeModal from '../../components/ledger/ServiceLifeModal';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane
const Option = Select.Option
function ServiceLifeLedger({ dispatch, serviceLifeLedger, loading, form }) {
const roomOptions = serviceLifeLedger.roomList?serviceLifeLedger.roomList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  };
  function callback(key) {
    var formData=form.getFieldsValue();
    var objectData={};
    objectData.roomIds=formData.roomIds;
    dispatch({
        type: 'serviceLifeLedger/getServiceLifeList',
        payload:{...objectData},
    });
  }

  const Pie = createG2(chart => {
    chart.col('label', {
           alias: '使用年限'
         });
    chart.axis('value', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      formatter: function(val) {
            return (val / 1 )+"";
          },
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      title: '使用年限', // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
      tickLine: {
        lineWidth: 1,
        stroke: '#000',
        value: 5,
      }, // 坐标点对应的线，null 不显示 图形属性
      labelOffset: 16, // 标轴文本距离轴线的距离
      grid: null, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
      gridAlign: 'middle',
    });
    chart.axis('label', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      labelOffset: 16, // 标轴文本距离轴线的距离
      tickLine: null, // 坐标点对应的线，null 不显示 图形属性
      title: null, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
    });
    chart.interval().position('label*value')
      .color('label',['#2cb7f5'])
      .label('value',{
        label: {
          fill: '#fff', //文本的颜色
          fontSize: '12', // 文本大小
        },
      })
    chart.render();
  });

  let plotCfg = {
    margin: [20, 180,80,80]
  };

    const handleGetOutEdit = () => {
      let param = JSON.stringify({ ...getFieldsValue() });
      param = encodeURIComponent(param);
      window.open(baseUrl+"/dataExcel/exportAssetServiceLife.jhtml?param="+param);
    }

    function onChange(value){
      console.log(value);
    }
    const modalDetailProps = {
          visible: serviceLifeLedger.modalVisible,
          maskClosable: false,
          dispatch: dispatch,
          detailList:serviceLifeLedger.detailList,
          pageNum:serviceLifeLedger.pageNum,
          pageSize:serviceLifeLedger.pageSize,
          total:serviceLifeLedger.total,
          roomId:serviceLifeLedger.roomId,
          brandId:serviceLifeLedger.brandId,
          title:'品牌明细',
          wrapClassName: 'vertical-center-modal',
          onCancel () {
            dispatch({
                type: 'serviceLifeLedger/hideModal',
            })
          },
    }
  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    return (
      <div style={{backgroundColor:'#fff'}}>
        <div style={{minHeight:'100%'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'50px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
          <Form layout="inline" style={{width:'100%'}}>
            <Row gutter={16}>
              <Col span={5}>
                <FormItem style={{ width: '100%' }} {...formItemLayout}>
                 {getFieldDecorator('roomIds')(
                    <Select
                    showSearch
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="选择机房"
                    optionFilterProp="children"
                  >
                  {roomOptions}
                </Select>
                )}
                </FormItem>
              </Col>
                 
             
              <Col span={4}></Col>
              <Col span={5} style={{textAlign: 'right'}}>             
                <FormItem>
                  <Button type="primary" size='large' onClick={callback.bind(this,0)}  icon="search">查询</Button>
                </FormItem>             
                <FormItem>
                  <Button size="large" onClick={handleGetOutEdit} icon="download" >导出</Button>
                </FormItem>    
              </Col>
            </Row>        
          </Form>
          </div>
            <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'20px',paddingRight:'20px'}}>
            <Tabs onChange={callback}  type="card">
            <TabPane tab={'列表'}  key="table">
              <Table
                columns={serviceLifeLedger.departColumnsList}
                dataSource={serviceLifeLedger.departList}
                pagination={false}
                rowKey={record => record.id}
                loading={serviceLifeLedger.departLoading}
                scroll={{ x:serviceLifeLedger.departWidth,}}
              />
            </TabPane>
             <TabPane tab={'图表'}  key="echart">
              <Pie key={new Date().valueOf()} data={serviceLifeLedger.chartData}   height={600} plotCfg={plotCfg} forceFit={true}/>
             </TabPane>
           </Tabs>
            </div>
       </div>
       <ServiceLifeModal {...modalDetailProps} />
     </div>
  );
}

function mapStateToProps(state) {
  return { serviceLifeLedger : state.serviceLifeLedger};
}

ServiceLifeLedger = Form.create()(ServiceLifeLedger);

export default connect(mapStateToProps)(ServiceLifeLedger);
